Example Game: Rock Paper Scissors
Related Topics
This tutorial will guide you through building a simple Rock-Paper-Scissors game using the Gig Game Developer API. You will create two main components: the host console and the player controller. The host will control the game flow, and the players will send their moves and receive the results.
Prerequisites
- Basic knowledge of HTML, JavaScript, and CSS.
- Access to the Gig Game Developer API.
- Using the
Player Controller-Only MultiplayerArchitecture
Game Flow
The Rock-Paper-Scissors game built using the Gig Game Developer API involves two main components: the host console and the player controller. The host console is responsible for controlling the pace of the game, starting new rounds, and determining the winner, while the player controller allows players to make their moves and receive game results.
Host Console
The host begins by waiting for players to join the game. Once a player has joined, the host can start a round by clicking the "Start Round" button. This action enables the host's move buttons (Rock, Paper, Scissors) and sends a signal to the player to make their move. The host then selects their move, which is temporarily stored. When the player makes their move, it is sent to the host, and the host's stored move is compared with the player's move to determine the winner. The result is displayed on the host's console and broadcasted back to the player. The host can then start a new round, repeating the process.
Player Controller
The player waits for the host to start a round. Once the round begins, the player's move buttons (Rock, Paper, Scissors) are enabled, allowing them to select their move. After making a selection, the player's move is sent to the host, and the move buttons are disabled to prevent multiple submissions. The player then waits for the host to complete their move and send back the result. When the result is received, it is displayed on the player's controller, informing them whether they won, lost, or tied the round. The player then waits for the host to start the next round.
This interactive flow ensures a seamless and engaging gameplay experience where the host manages the game dynamics, and players actively participate in each round, with real-time feedback and results communication.
Step 1: Setting Up the Host Console
/console/index.html
This file will contain the code for the host console, which controls the game flow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors - Host</title>
<!-- Include the Gig Game API JavaScript library -->
<script src="https://launch.gig.game/api/js?key={API_KEY}"></script>
</head>
<body
gg-gamekey="{get from gig game hub}" <!-- Game key assigned by the Gig Game Hub -->
gg-hostkey="{get from gig game hub}" <!-- Host key assigned by the Gig Game Hub -->
gg-language="en"> <!-- Language setting -->
<h1>Rock Paper Scissors - Host Console</h1>
<!-- Status display -->
<div id="status">Waiting for player...</div>
<!-- Buttons for game actions, initially disabled -->
<button id="startRoundBtn" onclick="startRound()" disabled>Start Round</button>
<button id="rockBtn" onclick="sendMove('rock')" disabled>Rock</button>
<button id="paperBtn" onclick="sendMove('paper')" disabled>Paper</button>
<button id="scissorsBtn" onclick="sendMove('scissors')" disabled>Scissors</button>
<!-- Div to display results of each round -->
<div id="results"></div>
<script>
let hostMove = null; // Variable to store the host's move
let playerMove = null; // Variable to store the player's move
// Function to start a new round
function startRound() {
// Update status and enable move buttons
document.getElementById("status").innerText = "Round started. Waiting for moves...";
document.getElementById("rockBtn").disabled = false;
document.getElementById("paperBtn").disabled = false;
document.getElementById("scissorsBtn").disabled = false;
// Broadcast event to players to start the round
$GG.server.broadcastToPlayers("startRound", {});
}
// Function to send the host's move
function sendMove(move) {
hostMove = move; // Store the host's move
// Disable move buttons after the host makes a move
document.getElementById("rockBtn").disabled = true;
document.getElementById("paperBtn").disabled = true;
document.getElementById("scissorsBtn").disabled = true;
// Update status
document.getElementById("status").innerText = `Host chose ${move}. Waiting for player...`;
// Check if both moves are made and determine the winner
checkWinner();
}
// Function to determine the winner
function checkWinner() {
if (hostMove && playerMove) { // If both moves are made
const resultsDiv = document.getElementById("results");
let result = "";
// Determine the outcome based on the moves
if (hostMove === playerMove) {
result = `Both chose ${playerMove}. It's a tie!`;
} else if (
(hostMove === "rock" && playerMove === "scissors") ||
(hostMove === "paper" && playerMove === "rock") ||
(hostMove === "scissors" && playerMove === "paper")
) {
result = `Host chose ${hostMove}. Player chose ${playerMove}. Host wins!`;
} else {
result = `Host chose ${hostMove}. Player chose ${playerMove}. Player wins!`;
}
// Display the result and broadcast it to the player
resultsDiv.innerHTML += `<p>${result}</p>`;
$GG.server.broadcastToPlayer("playerMoveResult", { result: result });
// Reset moves for the next round
hostMove = null;
playerMove = null;
// Update status and enable the start round button
document.getElementById("status").innerText = "Round finished. Start a new round.";
document.getElementById("startRoundBtn").disabled = false;
}
}
document.addEventListener("DOMContentLoaded", function () {
// Event listener for when the Gig Game server is ready
$GG.server.attachEvent("OnReady", () => {
console.log("Host console ready");
});
// Event listener for receiving the player's move
$GG.server.attachEvent("playerMove", (data) => {
playerMove = data.move; // Store the player's move
// Update status and check the winner
document.getElementById("status").innerText = `Player chose ${data.move}. Waiting for host...`;
checkWinner();
});
// Event listener for when a player joins
$GG.server.attachEvent("PlayerSessionStart", (player) => {
document.getElementById("status").innerText = `Player ${player.playerName} has joined.`;
document.getElementById("startRoundBtn").disabled = false; // Enable start round button
});
});
</script>
</body>
</html>
Explanation:
- The host console waits for players to join and controls the game flow by starting rounds and making moves.
- When the host starts a round, a message is broadcasted to all players to start their moves.
- The host and player moves are compared to determine the winner, and the result is broadcasted to the player.
Step 2: Setting Up the Player Controller
/controller/index.html
This file will contain the code for the player controller, which allows players to make moves.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors - Player</title>
<!-- Include the Gig Game API JavaScript library -->
<script src="https://launch.gig.game/api/js?key={API_KEY}"></script>
</head>
<body gg-gamekey="{get from gig game hub}" <!-- Game key assigned by the Gig Game Hub -->
gg-playerkey="00000000-0000-0000-0000-000000000001" <!-- Player key 1 = player 1 when testing -->
gg-language="en"> <!-- Language setting -->
<h1>Rock Paper Scissors - Player Controller</h1>
<!-- Status display -->
<div id="status">Waiting for host to start the round...</div>
<!-- Buttons for game actions, initially disabled -->
<button id="rockBtn" onclick="sendMove('rock')" disabled>Rock</button>
<button id="paperBtn" onclick="sendMove('paper')" disabled>Paper</button>
<button id="scissorsBtn" onclick="sendMove('scissors')" disabled>Scissors</button>
<script>
// Function to send the player's move to the host
function sendMove(move) {
// Broadcast the player's move to the host
$GG.server.broadcastToHost("playerMove", { move: move });
// Update the status to indicate the move has been made
document.getElementById("status").innerText = `You chose ${move}. Waiting for host...`;
// Disable the move buttons after the player makes a move
document.getElementById("rockBtn").disabled = true;
document.getElementById("paperBtn").disabled = true;
document.getElementById("scissorsBtn").disabled = true;
}
document.addEventListener("DOMContentLoaded", function () {
// Event listener for when the Gig Game server is ready
$GG.server.attachEvent("OnReady", () => {
console.log("Player controller ready");
});
// Event listener for the start of a new round
$GG.server.attachEvent("startRound", () => {
// Update status and enable move buttons
document.getElementById("status").innerText = "Round started. Make your move.";
document.getElementById("rockBtn").disabled = false;
document.getElementById("paperBtn").disabled = false;
document.getElementById("scissorsBtn").disabled = false;
});
// Event listener for receiving the result of the move
$GG.server.attachEvent("playerMoveResult", (data) => {
// Update the status with the result
document.getElementById("status").innerText = data.result;
});
});
</script>
</body>
</html>
Explanation:
- The player controller waits for the host to start a round.
- When the round starts, the player can make their move.
- The result of the round is received from the host and displayed to the player.